<template>
    <div>
        <div class="container">
            <h1>工厂配件管理系统</h1>
            <el-link type="info" @click="back" style="float: right;">返回</el-link>
            <el-form ref="form" :model="loginInfo" :rules="loginRules" label-width="80px">
                <el-form-item label="用户名" prop="username">
                    <el-input v-model="loginInfo.username" autocomplete="off" placeholder="请输入用户名"
                        @blur="handleBlur('username')" />
                    <template v-slot:error>
                        <div v-if="errors.username" class="error">{{ errors.username }}</div>
                    </template>
                </el-form-item>
                <el-form-item label="密码" prop="password">
                    <el-input v-model="loginInfo.password" type="password" autocomplete="off" placeholder="请输入密码"
                        @blur="handleBlur('password')" />
                    <template v-slot:error>
                        <div v-if="errors.password" class="error">{{ errors.password }}</div>
                    </template>
                </el-form-item>
                <el-form-item label="验证码" prop="captcha">
                    <el-input v-model="loginInfo.captcha" type="text" autocomplete="off" placeholder="请输入验证码"
                        @blur="handleBlur('captcha')" />
                    <template v-slot:error>
                        <div v-if="errors.captcha" class="error">{{ errors.captcha }}</div>
                    </template>
                </el-form-item>
                <el-image style="width: 120px; height: 38px; padding-left: 90px;" :src="captchaImageBase64Data" @click="getCaptcha"/>
                <el-form-item>
                    <el-button type="primary" @click="login" style="width: 100px;">登录</el-button>
                </el-form-item>
            </el-form>
        </div>
        <div class="background-container"></div>
    </div>
</template>

<script setup>
import { ref } from 'vue';
import { ElMessage } from 'element-plus';
import router from '@/router';
import adminApi from '@/api/adminApi';
import { useTokenStore } from '@/stores/token';


const tokenStore = useTokenStore();

const loginInfo = ref({
    username: '',
    password: '',
    captchaId: '',
    captcha: ''
});
const captchaImageBase64Data = ref();
//生成验证码
function getCaptcha() {
    adminApi.captcha()
    .then(resp => {
        loginInfo.value.captchaId = resp.data.captchaId;
        captchaImageBase64Data.value = resp.data.captchaImageBase64Data;
    });
}
getCaptcha();
function login() {
    adminApi.login(loginInfo.value)
        .then(resp => {
            if (resp.code == 10000) {
                tokenStore.update(resp.data);
                
                // 跳转     
                router.push('/repair');
                ElMessage({
                    message: '登录成功',
                    type: 'success',
                    duration: 2000
                });
            } else {
                ElMessage({
                    message: resp.msg,
                    type: 'error',
                    duration: 2000
                });
            }
        });
}

function back() {
    router.push('/chooseLogin')
}

// 表单校验规则
const loginRules = {
    username: [
        { required: true, message: '用户名不能为空', trigger: 'blur' }
    ],
    password: [
        { required: true, message: '密码不能为空', trigger: 'blur' }
    ],
    captcha: [
        { required: true, message: '验证码不能为空', trigger: 'blur' }
    ]
};

// 错误信息
const errors = ref({
    username: '',
    password: '',
    captcha: ''
});

// 引用 form 实例
const form = ref(null);

const handleBlur = (field) => {
    form.value.validateField(field, (error) => {
        if (error) {
            errors.value[field] = error.message;
        } else {
            errors.value[field] = '';
        }
    });
};
</script>

<style scoped>
/* 卡片样式 */
.container {
    position: relative;
    width: 500px;
    border: 2px solid #3498db;
    border-radius: 10px;
    padding: 20px;
    padding-top: 0px;
    margin: auto;
    margin-top: 150px;
    background-color: rgba(240, 248, 255, 0.8);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.2);
}

h1 {
    color: #3498db;
    font-size: 24px;
    margin-bottom: 20px;
}

.el-form-item label {
    font-size: 16px;
    color: #555;
}

.el-input {
    border-radius: 5px;
}

.el-button {
    background-color: #3498db;
    color: white;
}

/* 修改后的背景样式 */
.background-container {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: lightskyblue;
    background-image: url('/login-bg-4.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    z-index: -1;
}

</style>